import Link from "next/link";
import { usePathname } from "next/navigation"
import { useGetLessonById } from "../model/useGetLessonById";
import { useEffect } from "react";
import { UiSpinner } from "@/shared/Uikit/UiSpinner";
import { useIsLessonCompleted } from "../model/useIsLessonCompleted";



type LessonLinkProps = {
    lessonId: number
}
export default function LessonLink(props: LessonLinkProps) {
    const pathname = usePathname()
    const { lesson, isPending, isSuccess, errorMessage } = useGetLessonById(props.lessonId)
    const isCompleted = useIsLessonCompleted(props.lessonId)
    return (
        <>
            {isSuccess && lesson && (
                <Link href={`${pathname}/lesson/${props.lessonId}`} className='w-fit'>
                    <div className='flex-col mt-4 drop-shadow-lg rounded-[25px] w-96 h-36 bg-gray-200 hover:bg-gray-100 p-5 pl-7'>
                        <h1 className='text-xl font-bold'>
                            {lesson.tittle}
                        </h1>
                        <p className='mt-8 text-lg'>
                            Награда за прохождение теста: {lesson.award}
                        </p>
                        {isCompleted.isSuccess && isCompleted.response == true &&
                        <>
                        Выполнено!
                        </>                         
                        }
                    </div>
                </Link>
            )}
            {isPending && <UiSpinner className='size-10' />}
            {errorMessage && <p className='text-red-500'>{errorMessage}</p>}
        </>
    )
}